{% extends 'layout.html' %}
{% load custom_filters %}
{% block title %}巡检结果{% endblock %}
{% block content %}
<div class="row">
    <div class="col-6">换电站编号：{{ inspect_result.station_id }}</div>
    <div class="col-6">换电站名称：<a href="/ai_inspect/station/{{inspect_request.station_id}}">{{ inspect_result.station_name }}</a></div>
    <div class="col-6">监控通道名称：{{ inspect_result.channel_name }}</div>
    <div class="col-6">巡检名称：{{ inspect_result.inspect_name }}</div>
    <div class="col-12">事件类型：{{ inspect_result.event_type }}</div>
    <div class="col-3">检测结果：{{inspect_result.result_type}}</div>
    <div class="col-3">目标类型：{{ inspect_result.target_type }}</div>
    <div class="col-3">置信度：{{ inspect_result.quality_score|floatformat:3 }}</div>
    <div class="col-3">人工复核：{{ inspect_result.verification }}</div>
    <div class="col-6">抓拍时间：{{ inspect_result.photo_url|get_photo_time}}</div>
    <div class="col-6">检测时间：{{ inspect_result.timestamp|timestamp_to_string}}</div>
</div>
<div class="row" align="center">
    <div class="col-4">
        <a role="button" accesskey="z" class="btn btn-success" href="/ai_inspect/inspect_result_verify/{{inspect_result.result_id}}/normal">正常</a>
    </div>
    <div class="col-4">
        <a role="button" accesskey="w" class="btn btn-info" href="/ai_inspect/inspect_result_verify/{{inspect_result.result_id}}/no_target">未发现目标</a>
    </div>
    <div class="col-4">
        <a role="button" accesskey="q" class="btn btn-warning" href="/ai_inspect/inspect_result_verify/{{inspect_result.result_id}}/broken">缺陷</a>
    </div>
</div>
<hr>
<div class="row">
    <div class="col">
        <div class="image-container">
            <img width="960px" height="540px" src="{{ inspect_result.photo_url }}">
            <div class="rectangle"></div>
                <div class="target_type">{{inspect_result.target_type}}</div>
            </div>
        </div>
    </div>
</div>
<style>
    .image-container{
        position: relative;
        display: inline-block;
    }
    .image-container img{
        display: block;
        width: 100%;
    }
    .rectangle{
        position: absolute;
        top: {{ inspect_result.y|div:2 }}px;
        left: {{ inspect_result.x|div:2 }}px;
        width: {{ inspect_result.width|div:2 }}px;
        height: {{ inspect_result.height|div:2 }}px;
        border: 1px solid red;
    }
    .target_type{
        position: absolute;
        top: {{ inspect_result.y|get_top }}px;
        left: {{ inspect_result.x|div:2 }}px;
        background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
        color: red;
        padding: 5px;
    }
</style>
{% endblock %}